<template>
    <div class="btns">
        <a class="u-btni-addply" title="播放">
            <i>
                <em class="ply"></em>播放
            </i>
        </a>
        <a class="u-btni-add" title="添加到播放列表">
        </a>
        <a class="u-btni-fav-dis"><i>收藏</i>
        </a>
        <a class="u-btni-share"><i>分享</i>
        </a>
        <a class="u-btni-dl"><i>下载</i>
        </a>
        <a class="u-btni-cmmt"><i>评论</i>
        </a>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.btns {
    margin-bottom: 25px;
    margin-right: -10px;
    display: flex;

    .u-btni-addply {
        color: #fff;
        background-position: right -428px !important;
        padding: 0 5px 0 0;
        white-space: nowrap;
        display: inline-block;
        height: 31px;
        line-height: 31px;
        overflow: hidden;
        vertical-align: top;
        text-align: center;
        background: url(../assets/Home/Recommend/button2.png) no-repeat;
        cursor: pointer;

        &:hover {
            color: #fff;
            background-position: right -510px !important;
        }

        &:hover i {
            color: #fff;
            background-position: 0 -469px !important;
        }

        &:hover .ply {
            background-position: -28px -1622px !important;
        }

        i {
            padding: 0 7px 0 8px;
            color: #fff;
            pointer-events: none;
            background-position: 0 -387px !important;
            display: inline-block;
            height: 31px;
            line-height: 31px;
            overflow: hidden;
            vertical-align: top;
            text-align: center;
            cursor: pointer;
            background: url(../assets/Home/Recommend/button2.png) no-repeat;

            .ply {
                float: left;
                width: 20px;
                height: 18px;
                margin: 6px 2px 2px 0;
                background-position: 0 -1622px !important;
                overflow: hidden;
                font-style: normal;
                text-align: left;
                font-size: inherit;
                cursor: pointer;
                background: url(../assets/Home/Recommend/button2.png) no-repeat;
            }
        }
    }

    .u-btni-add {
        margin-right: 5px;
        width: 31px;
        margin-left: -3px;
        padding-right: 0;
        background-position: 0 -1588px !important;
        color: #333;
        text-decoration: none;
        padding: 0 5px 0 0;
        white-space: nowrap;
        height: 31px;
        line-height: 30px;
        min-width: 23px;
        cursor: pointer;
        background: url(../assets/Home/Recommend/button2.png) no-repeat;

        &:hover {
            background-position: -40px -1588px !important;
        }
    }

    .u-btni-fav-dis {
        margin-right: 6px;
        cursor: default;
        background-position: right -1192px !important;
        color: #333;
        text-decoration: none;
        padding: 0 5px 0 0;
        height: 31px;
        line-height: 30px;
        min-width: 23px;
        white-space: nowrap;
        background: url(../assets/Home/Recommend/button2.png) no-repeat;

        i {
            float: left;
            height: 31px;
            line-height: 30px;
            min-width: 23px;
            padding-right: 2px;
            padding-left: 28px;
            color: #bebebe;
            background-position: 0 -1149px !important;
            cursor: default;
            background: url(../assets/Home/Recommend/button2.png) no-repeat;
        }
    }

    .u-btni-share {
        margin-right: 6px;
        background-position: right -1020px !important;
        color: #333;
        text-decoration: none;
        padding: 0 5px 0 0;
        white-space: nowrap;
        height: 31px;
        line-height: 30px;
        min-width: 23px;
        background: url(../assets/Home/Recommend/button2.png) no-repeat;
        cursor: pointer;

        &:hover {
            background-position: right -1106px !important;
        }

        i {
            background-position: 0 -1225px !important;
            padding-right: 2px;
            padding-left: 28px;
            // padding: 0 7px 0 36px;
            float: left;
            height: 31px;
            line-height: 30px;
            min-width: 23px;
            background: url(../assets/Home/Recommend/button2.png) no-repeat;
            font-style: normal;
            text-align: left;
            font-size: inherit;
            cursor: pointer;

            &:hover {
                background-position: 0 -1268px !important;
            }
        }
    }

    .u-btni-dl {
        margin-right: 6px;
        background-position: right -1020px !important;
        color: #333;
        text-decoration: none;
        padding: 0 5px 0 0;
        white-space: nowrap;
        height: 31px;
        line-height: 30px;
        min-width: 23px;
        background: url(../assets/Home/Recommend/button2.png) no-repeat;
        cursor: pointer;

        &:hover {
            background-position: right -1106px !important;
        }

        i {
            background-position: 0 -2761px !important;
            padding-right: 2px;
            padding-left: 28px;
            // padding: 0 7px 0 36px;
            float: left;
            height: 31px;
            line-height: 30px;
            min-width: 23px;
            background: url(../assets/Home/Recommend/button2.png) no-repeat;
            cursor: pointer;

            &:hover {
                background-position: 0 -2805px !important;
            }
        }
    }

    .u-btni-cmmt {
        margin-right: 6px;
        background-position: right -1020px !important;
        color: #333;
        text-decoration: none;
        padding: 0 5px 0 0;
        white-space: nowrap;
        height: 31px;
        line-height: 30px;
        min-width: 23px;
        background: url(../assets/Home/Recommend/button2.png) no-repeat;
        cursor: pointer;

        &:hover {
            background-position: right -1106px !important;
        }

        &:hover i {
            background-position: 0 -1508px !important;
        }

        i {
            background-position: 0 -1465px !important;
            padding-right: 2px;
            padding-left: 28px;
            float: left;
            height: 31px;
            line-height: 30px;
            min-width: 23px;
            background: url(../assets/Home/Recommend/button2.png) no-repeat;
            cursor: pointer;
        }
    }
}
</style>